<template>
	<view class="page">
		<view class="flex-box align-center item">
			<input type="text" v-model="phone" placeholder="请输入订单通知手机号码" class="flex" placeholder-class="pla"/>
			<text class="iconfont icon-zengjia" :class="{active: phone}" @click="showPhone"></text>
		</view>
		<view class="flex-box align-center item" v-if='showPhone1'>
			<input type="text" v-model="phone1" placeholder="请输入订单通知手机号码" class="flex" placeholder-class="pla"/>
			<text class="iconfont icon-jianshao2" @click="showPhone1 = false;phone1=''"></text>
		</view>
		<view class="flex-box align-center item">
			<input type="text" v-model="email" placeholder="请输入订单通知邮箱号码" class="flex" placeholder-class="pla"/>
			<text class="iconfont icon-zengjia" :class="{active: email}" @click="showEmail"></text>
		</view>
		<view class="flex-box align-center item" v-if='showEmail1'>
			<input type="text" v-model="email1" placeholder="请输入订单通知邮箱号码" class="flex" placeholder-class="pla"/>
			<text class="iconfont icon-jianshao2" @click="showEmail1 = false;email1=''"></text>
		</view>
		<view class="tips">注：仅支持最多两个手机号和邮箱，使用时请购买短信条数，空为不发送</view>
		<view class="btn" @click="submit">绑定</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				phone:'',
				showPhone1: false,
				phone1:'',
				email:'',
				showEmail1: false,
				email1:''
			};
		},
		onLoad() {
			that = this
			that.getStoreIndex()
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods:{
			getStoreIndex(){
				that.$http.get({
					url: '/singleSaleManageApi/storeConfig',
					data:{
						shop_id: uni.getStorageSync('store_id')
					}
				}).then(res => {
					if (res.code == 200) {
						if(res.data.sendOtherPhone){
							if(res.data.sendOtherPhone[0]){
								that.phone = res.data.sendOtherPhone[0]
							}
							if(res.data.sendOtherPhone[1]){
								that.phone1 = res.data.sendOtherPhone[1]
								that.showPhone1 = true
							}
						}
						if(res.data.emailName){
							if(res.data.emailName[0]){
								that.email = res.data.emailName[0]
							}
							if(res.data.emailName[1]){
								that.email1 = res.data.emailName[1]
								that.showEmail1 = true
							}
						}
					}
				})
			},
			showPhone(){
				if(that.phone){
					that.showPhone1 = true
				}
			},
			showEmail(){
				if(that.email){
					that.showEmail1 = true
				}
			},
			submit(){
				if(!that.phone.trim() && !that.email.trim()){
					uni.showToast({title:'至少输入一个邮箱或电话',icon:'none'})
					return
				}
				if(that.phone.trim() && !that.$reg.phone.test(that.phone)){
					uni.showToast({title:'手机号码格式有误',icon:'none'})
					return
				}
				if(that.phone1.trim() && !that.$reg.phone.test(that.phone1)){
					uni.showToast({title:'备用手机号码格式有误',icon:'none'})
					return
				}
				
				if(that.email.trim() && !that.$reg.email.test(that.email)){
					uni.showToast({title:'邮箱格式有误！',icon:'none'})
					return
				}
				if(that.email1.trim() && !that.$reg.email.test(that.email1)){
					uni.showToast({title:'备用邮箱格式有误！',icon:'none'})
					return
				}
				let phone = '',email=''
				if(that.phone.trim()){
					phone = that.phone
					if(that.phone1.trim()){
						phone = phone+','+that.phone1
					}
				}
				
				if(that.email.trim()){
					email = that.email
					if(that.email1.trim()){
						email = email+','+that.email1
					}
				}
				that.$http.post({
					url: '/singleSaleManageApi/modify_order_notice',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						order_sms: phone,
						order_mail: email
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
					if (res.code == 200) {
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #FFFFFF;
		padding: 24rpx $page-space;
		.item{
			height: 98rpx;
			border: 1px solid #EEEEEE;
			border-radius: $border-radius-base;
			padding: 0 20rpx 0 28rpx;
			margin-bottom: 24rpx;
			.icon-zengjia{
				font-size: 38rpx;
				color: #EEEEEE;
			}
			.active{
				color: $uni-color-primary;
			}
			.icon-jianshao2{
				font-size: 38rpx;
				color: $uni-color-primary;
			}
		}
		.tips{
			color: #FF432A;
			padding: 0 20rpx;
		}
		.btn{
			margin-top: 98rpx;
			border-radius: $border-radius-base;
			color: white;
			text-align: center;
			line-height: 88rpx;
			font-size: $font-size-lg;
			background: #FF784A linear-gradient(157deg, rgba(255, 255, 255, 0.37) 0%, rgba(255, 255, 255, 0) 100%);
		}
	}
</style>
